<template>
  <head-top :loading="loading">
    <view class="home" :style="`background:${HomeBack}`">
      <view class="home_head">
        <u-image :show-loading="true" src="https://taoaiimage.oss-cn-shanghai.aliyuncs.com/test/cx.png" width="100%"
          height="398rpx" mode="aspectFill"></u-image>
        <view class="home_content">
          <u-image :show-loading="true" src="https://taoaiimage.oss-cn-shanghai.aliyuncs.com/test/bx.png" width="690rpx"
            height="72rpx"></u-image>
        </view>
      </view>
      <view class="home_upload">
        <view class="home_upload_head">
          我要免单
        </view>
        <view class="home_upload_content">
          <u-image @click="upload" v-if="formData.imageUrl" :show-loading="true" mode="aspectFill"
            :src="formData.imageUrl" width="156rpx" height="156rpx"></u-image>
          <u-image @click="upload" v-else :show-loading="true" mode="aspectFill"
            src="https://taoaiimage.oss-cn-shanghai.aliyuncs.com/test/back2x.png" width="156rpx"
            height="156rpx"></u-image>
          <view class="home_upload_input">
            <view class="home_upload_ul">
              <view class="hui">商品名称</view>
              <input type="text" placeholder="输入商品名称" v-model="formData.name" />
            </view>
            <view class="home_upload_ul">
              <view class="hui">商品价钱</view>
              <input type="number" v-model="formData.price" placeholder="输入商品价钱" />
            </view>
          </view>
          <view class="home_upload_ps">
            免单说明: 本活动您无需支付任何费用，只需上传您所需要免单的商品图片、商品名称和商品价格，我们将会给您相应数量的福袋，待福袋被抢完之后您就可以获得免单，免单金额为您输入商品价格的10%-100%。
          </view>
          <button class="home_btn btnmar" :disabled="sublimeBtn" @click="sublime">提交订单</button>
        </view>
      </view>
    </view>
    <!-- 审核弹框 -->
    <u-popup mode="center" :safeAreaInsetBottom="false" round="10" closeable :show="showModal" @close="closeModal">
      <view class="homeModal">
        <view class="homeModal_img">
          <u-image :show-loading="true" mode="aspectFill"
            src="https://kaixintaomall.oss-cn-guangzhou.aliyuncs.com/file/confirm.png" width="318rpx"
            height="221rpx"></u-image>
        </view>
        <view class="bold">已提交，系统审核中</view>
        <view class="homeModal_deng">请耐心等待</view>
        <button class="home_btn">知道了，去下抢福袋</button>
      </view>
    </u-popup>
  </head-top>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, reactive, getCurrentInstance } from 'vue'
import { chooseAll, setApiData } from '@/hooks'
const { setApi } = setApiData()
const { chooseAllFile_ } = chooseAll()
const { proxy }: any = getCurrentInstance()
const loading = ref<boolean>(true)
const showModal = ref<boolean>(false)
const HomeBack = ref<string>('')
const sublimeBtn = ref<boolean>(false)
const formData = reactive({
  name: '',
  imageUrl: '',
  price: ''
})
function closeModal() {
  showModal.value = false
}
const upload = (async () => {
  const res = await chooseAllFile_()
  formData.imageUrl = res.imageUrl
})
onMounted(() => {
  setTimeout(() => {
    loading.value = false
    HomeBack.value = '#6E06ED'
  }, 1500)

})
function sublime() {
  sublimeBtn.value = true
  nextTick(async () => {
    const result = await setApi({
      name: 'homeSubmit',
      param: [formData]
    })
    if (result.code == 200) {
      showModal.value = true
      sublimeBtn.value = false
    } else {
      sublimeBtn.value = false
      proxy.showMsg.show({ text: result.msg })
    }
  })
}
function showMsg_(Node: any) {

}
</script>
<style></style>
<style lang="scss" scoped>
@import './home.scss';
</style>